<template>
  <div>
    <chart v-if="showChart"></chart>
    <secur v-else :newObj="newObj" :title="title" @goBack="goback"></secur>
    <div class="footer">
      <bottom
        :date="date"
        :showChart="showChart"
        @findid="findid"
        :idx="dataIdx"
        @selected="selected"
      ></bottom>
    </div>
  </div>
</template>
<script setup>
// import
import bottom from "./bottom.vue";
import chart from "./charts/index.vue";
import secur from "@/views/Security/secur/index.vue";
import { ref, onMounted, onUnmounted, reactive, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
let showChart = ref(true);
let dataIdx = ref(-1);
const selected = (idx) => {
  // console.log(idx);
  dataIdx.value = idx;
};

watch(showChart, () => {
  if (showChart.value) {
    dataIdx.value = -1;
  }
});

let dateNew = ref([
  {
    id: "1",
    title: "人员黑名单识别告警",
    tag: "一般",
    idCode: "000111222333",
    type: "人员黑名单",
    alarmName: "人员黑名单",
    rank: "一般",
    position: "主培楼IV楼",
    deviceId: "00123456",
    deviceName: "主PX_大楼",
    deviceIP: "00000",
    time: "2023-08-12",
    informant: "",
    trajectory: "1",
    handling: {
      alarmName: "",
      time: "2023-08-11",
      remark: "",
      option: "",
    },
    pople: {
      alarmName: "监控岗",
      condition: "已完成",
      time: "2023-08-23 16：18",
    },
    pre_plan: [
      { value: "通知应急小组", show: true },
      { value: "门禁控制", show: false },
      { value: "短信通知员工", show: true },
      { value: "呼叫120", show: true },
      { value: "呼叫110", show: true },
    ],
  },
  {
    id: "2",
    title: "人员黑名单识别告警",
    tag: "一般",
    idCode: "000111222333",
    type: "人员黑名单",
    alarmName: "人员黑名单",
    rank: "一般",
    position: "主培楼IV楼",
    deviceId: "00123456",
    deviceName: "主PX_大楼",
    deviceIP: "00000",
    time: "2023-08-12",
    informant: "",
    trajectory: "1",
    handling: {
      alarmName: "",
      time: "2023-08-11",
      remark: "",
      option: "",
    },
    pople: {
      alarmName: "监控岗",
      condition: "已完成",
      time: "2023-08-23 16：18",
    },
  },
  {
    id: "3",
    title: "人员黑名单识别告警",
    tag: "一般",
    idCode: "000111222333",
    type: "人员黑名单",
    alarmName: "人员黑名单",
    rank: "一般",
    position: "主培楼IV楼",
    deviceId: "00123456",
    deviceName: "主PX_大楼",
    deviceIP: "00000",
    time: "2023-08-12",
    informant: "",
    // trajectory: "1",
    diagnosis: {
      rule: "在规则，名称为阿斯蒂芬你你你你你你你你你你你你你们所谓的法人股替换即可",
      logs: [
        { time: "2019-08-22", content: "一小时内回风二氧化碳恒定为：2861ppm" },
        { time: "2019-08-22", content: "一小时内回风二氧化碳恒定为：2861ppm" },
        { time: "2019-08-22", content: "一小时内回风二氧化碳恒定为：2861ppm" },
        { time: "2019-08-22", content: "一小时内回风二氧化碳恒定为：2861ppm" },
      ],
    },
    handling: {
      alarmName: "",
      time: "2023-08-11",
      remark: "",
      option: "",
    },
  },
  {
    id: "4",
    title: "人员黑名单识别告警",
    tag: "一般",
    idCode: "000111222333",
    type: "人员黑名单",
    alarmName: "人员黑名单",
    rank: "一般",
    position: "主培楼IV楼",
    deviceId: "00123456",
    deviceName: "主PX_大楼",
    deviceIP: "00000",
    time: "2023-08-12",
    informant: "",
    trajectory: "1",
    handling: {
      alarmName: "",
      time: "2023-08-11",
      remark: "",
      option: "",
    },
    pople: {
      alarmName: "监控岗",
      condition: "已完成",
      time: "2023-08-23 16：18",
    },
  },
  {
    id: "5",
    title: "人员黑名单识别告警",
    tag: "一般",
    idCode: "000111222333",
    type: "人员黑名单",
    alarmName: "人员黑名单",
    rank: "一般",
    position: "主培楼IV楼",
    deviceId: "00123456",
    deviceName: "主PX_大楼",
    deviceIP: "00000",
    time: "2023-08-12",
    informant: "",
    trajectory: "1",
    handling: {
      alarmName: "",
      time: "2023-08-11",
      remark: "",
      option: "",
    },
    pople: {
      alarmName: "监控岗",
      condition: "已完成",
      time: "2023-08-23 16：18",
    },
  },
  {
    id: "6",
    title: "人员黑名单识别告警",
    tag: "一般",
    idCode: "000111222333",
    type: "人员黑名单",
    alarmName: "人员黑名单",
    rank: "一般",
    position: "主培楼IV楼",
    deviceId: "00123456",
    deviceName: "主PX_大楼",
    deviceIP: "00000",
    time: "2023-08-12",
    informant: "",
    trajectory: "1",
    handling: {
      alarmName: "",
      time: "2023-08-11",
      remark: "",
      option: "",
    },
    pople: {
      alarmName: "监控岗",
      condition: "已完成",
      time: "2023-08-23 16：18",
    },
  },
  {
    id: "7",
    title: "人员黑名单识别告警",
    tag: "一般",
    idCode: "000111222333",
    type: "人员黑名单",
    alarmName: "人员黑名单",
    rank: "一般",
    position: "主培楼IV楼",
    deviceId: "00123456",
    deviceName: "主PX_大楼",
    deviceIP: "00000",
    time: "2023-08-12",
    informant: "",
    trajectory: "1",
    handling: {
      alarmName: "",
      time: "2023-08-11",
      remark: "",
      option: "",
    },
    pople: {
      alarmName: "监控岗",
      condition: "已完成",
      time: "2023-08-23 16：18",
    },
  },
  {
    id: "8",
    title: "人员黑名单识别告警",
    tag: "一般",
    idCode: "000111222333",
    type: "人员黑名单",
    alarmName: "人员黑名单",
    rank: "一般",
    position: "主培楼IV楼",
    deviceId: "00123456",
    deviceName: "主PX_大楼",
    deviceIP: "00000",
    time: "2023-08-12",
    informant: "",
    trajectory: "1",
    handling: {
      alarmName: "",
      time: "2023-08-11",
      remark: "",
      option: "",
    },
    pople: {
      alarmName: "监控岗",
      condition: "已完成",
      time: "2023-08-23 16：18",
    },
  },
]);
let date = ref([
  {
    code: "001",
    message: "火警",
    id: 1,
    tag: "一般",
    title: "人员黑名单",
    time: "2023-08-11 16：17：39",
    position: "主培楼IV一楼",
    description: "人员黑名单",
    imgUrl: require("@/assets/bottom1/1.jpg"),
  },
  {
    code: "002",
    message: "视频周界",
    id: 2,
    tag: "一般",
    title: "人员黑名单",
    time: "2023-08-11 16：17：39",
    position: "主培楼IV一楼",
    description: "人员黑名单",
    imgUrl: require("@/assets/bottom1/1.jpg"),
  },
  {
    code: "003",
    message: "故障",
    id: 3,
    tag: "一般",
    title: "人员黑名单",
    time: "2023-08-11 16：17：39",
    position: "主培楼IV一楼",
    description: "人员黑名单",
    imgUrl: require("@/assets/bottom1/1.jpg"),
  },
  {
    id: 4,
    tag: "一般",
    title: "人员黑名单",
    time: "2023-08-11 16：17：39",
    position: "主培楼IV一楼",
    description: "人员黑名单",
    imgUrl: require("@/assets/bottom1/1.jpg"),
  },
  {
    id: 5,
    tag: "紧急",
    title: "人员黑名单",
    time: "2023-08-11 16：17：39",
    position: "主培楼IV一楼",
    description: "人员黑名单",
    imgUrl: require("@/assets/bottom1/1.jpg"),
  },
  {
    id: 6,
    tag: "紧急",
    title: "人员黑名单",
    time: "2023-08-11 16：17：39",
    position: "主培楼IV一楼",
    description: "人员黑名单",
    imgUrl: require("@/assets/bottom1/1.jpg"),
  },
  {
    id: 7,
    tag: "紧急",
    title: "人员黑名单",
    time: "2023-08-11 16：17：39",
    position: "主培楼IV一楼",
    description: "人员黑名单",
    imgUrl: require("@/assets/bottom1/1.jpg"),
  },
  {
    id: 8,
    tag: "紧急",
    title: "人员黑名单",
    time: "2023-08-11 16：17：39",
    position: "主培楼IV一楼",
    description: "人员黑名单",
    imgUrl: require("@/assets/bottom1/1.jpg"),
  },
]);
let title = ref("");
// const pageFunctionName = (idx) => ue5("function_name", function_params(idx));
// function function_params(idx) {
//   return idx;
// }
// const enter = (idx) => {
//   pageFunctionName(idx);
// };
const goback = (flag) => (showChart.value = flag);
onMounted(() => {
  title.value = route.meta.title;
});
onUnmounted(() => {});
let newObj = ref();
const findid = (obj) => {
  let id = obj.id;
  showChart.value = obj.show;
  newObj.value = dateNew.value.find((item) => item.id == id);
};
</script>
<style scoped>
.security {
  width: 100vw;
  height: 100vh;
  /* padding: 0 2vw; */
  position: relative;
}
</style>
